<template>
	<view class="content">
		<!--输入金额-->
		<view class="content_1">
			<view class="recharge_view">
				<view class="recharge_title">微信支付</view>
				<view class="recharge_input">
					<view class="input_icon">￥</view>
					<input class="input" @input="getUserInput" placeholder="请输入金额" placeholder-style="font-siza:56upx; color:#bbbbbb"
					 type="number" />
				</view>
				<view class="recharge_line"></view>
				<view class="recharge_tips">该卡本次最多可充值¥10000</view>
			</view>
		</view>
		<!--确认充值-->
		<view class="content_2">
			<view class="confirm" v-on:click.once="toSuccess">确认充值</view>
		</view>
	</view>
</template>

<script>
	import {Request} from '../../../../utils/request.js';
	const app = getApp();
	export default {
		data() {
			return {
				money: ''
			}
		},
		methods: {
			//获取用户输入信息,赋值给money,正则
			getUserInput: function(e) {
				this.money = (e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				console.log(this.money)
			},
			//判断用户输入金额,跳转页面
			toSuccess: function() {
				if (this.money == '') {
					new Request().showToast('请输入金额');
					return;
				} else if (parseFloat(this.money) > 10000) {
					new Request().showToast('该卡本次最多可充值¥10000');
					return;
				} else {
					// 原 充值接口 customer/purse/Recharge_Purse/RechargeMoney
					// 现 充值接口 payment/PayRechargeMoney/PayOrder
					new Request('payment/PayRechargeMoney/PayOrder').request(
						()=>{
							return 'POST'
						},
						()=>{
							return {
								openid: app.globalData.openid,
								userid: app.globalData.userid,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project,
								pursemoney: this.money,
							}
						},
						(res)=>{
							if(res.data.code == 0){
								new Request().showToast(res.data.msg);
								return;
							}
							let that = this;
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp.toString(),
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: 'MD5',
								paySign: res.data.sign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.reLaunch({
										url: '/pages/mine/purse/recharge/success/success?money=' + that.money,
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									new Request().showToast('已取消支付', 'none', ()=>{
										setTimeout(()=>{
											uni.navigateBack({
											    delta: 1
											});
										},2000);
									});
								}
							});
							
						}
					);
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		输入金额样式
	*/
	.content_1 {
		margin: 0upx 30upx;
		margin-top: 40upx;
	}

	.recharge_view {
		height: 350upx;
		background-color: #FFFFFF;
		border-radius: 8upx;
		display: flex;
		flex-direction: column;
	}

	.recharge_title {
		width: 152upx;
		height: 104upx;
		line-height: 104upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
		margin-bottom: 8upx;
	}

	.recharge_input {
		height: 104upx;
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
	}

	.input_icon {
		width: 90upx;
		height: 104upx;
		font-size: 72upx;
		text-align: center;
		line-height: 104upx;
	}

	.input {
		height: 100upx;
		line-height: 100upx;
		font-size: 56upx;
	}

	.recharge_line {
		height: 2upx;
		background-color: #BBBBBB;
		margin: 0 30upx;
	}

	.recharge_tips {
		width: 382upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
	}

	/*
		确认充值样式
	*/
	.content_2 {
		margin: 0 20upx;
		margin-top: 40upx;
	}

	.confirm {
		height: 88upx;
		border-radius: 10upx;
		text-align: center;
		line-height: 80upx;
		font-size: 32upx;
		color: #FFFFFF;
		background-color: #63D0D5;
	}
</style>
